<template>
    <tm-form :margin="[0, 0]" :padding="[0, 0]" ref="form" v-model="formInfo" :label-width="142">
        <tm-form-item :showTopErrorGap="false" required label="姓名" field="username" :rules="[
            { required: true, message: '姓名不能为空', validator: (val) => val.length > 0 },
        ]">
            <tm-input :font-size="28" placeholderStyle="color:#9F9B94" :inputPadding="[0, 0]"
                v-model.lazy="formInfo.username" :transprent="true" :showBottomBotder="false"> </tm-input>
        </tm-form-item>
        <tm-form-item required label="性别" field="gender" :rules="[{ required: true, message: '请选择性别' }]">
            <tm-radio-group v-model="formInfo.gender">
                <tm-radio outlined icon="tmicon-yuan" :size="36" label="男" value="0"></tm-radio>
                <tm-radio outlined icon="tmicon-yuan" :size="36" label="女" value="1"></tm-radio>
            </tm-radio-group>
        </tm-form-item>
        <tm-form-item required label="出生时间" field="birthday" :rules="[{ required: true, message: '请选择时间' }]">
            <view @click="handleSelectDate" class="flex flex-row flex-row-center-between">
                <view v-if="formInfo.birthday">
                    <tm-text :userInteractionEnabled="false" color="#9F9B94" :label="birthdayStr"></tm-text>
                    <tm-text :userInteractionEnabled="false" color="#9F9B94" :label="lunarBirthdayStr"></tm-text>
                </view>
                <tm-text v-else :userInteractionEnabled="false" color="#9F9B94" label="请选择时间"></tm-text>
                <tm-icon :userInteractionEnabled="false" color="#CFB88E" :font-size="24"
                    name="tmicon-angle-right"></tm-icon>
            </view>
        </tm-form-item>
        <tm-form-item :padding="[0, 0]" label="出生地址" field="address" required
            :rules="[{ required: true, message: '请选择出生地址' }]">
            <view @click="showCityPickerView = !showCityPickerView" class="flex flex-row flex-row-center-between">
                <tm-text :userInteractionEnabled="false" color="#9F9B94"
                    :label="formInfo.addressStr || '请选择所在地区地址'"></tm-text>
                <tm-icon :userInteractionEnabled="false" color="#CFB88E" :font-size="24"
                    name="tmicon-angle-right"></tm-icon>
            </view>
        </tm-form-item>
        <tm-form-item :showTopErrorGap="false" required label="详细地址" field="street" :rules="[
            { required: true, message: '详细地址为空', validator: (val) => val.length > 0 },
        ]">
            <tm-input :font-size="28" placeholderStyle="color:#9F9B94" :inputPadding="[0, 0]"
                v-model.lazy="formInfo.street" :transprent="true" :showBottomBotder="false"> </tm-input>
        </tm-form-item>
    </tm-form>
    <nj-birthday-picker themeColor="#A37C3D" ref="pickerRef" @submit="handleBirthdayDate" title="生日选择器"
        maskColor="rgba(0,0,0,0.3)" :defaultDate="formInfo.birthday" :defaultLunar="true" />
    <tm-city-picker v-model:model-str="formInfo.addressStr" v-model="formInfo.address"
        v-model:show="showCityPickerView"></tm-city-picker>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useUserStore } from '/stores/user'
import { parseUserInfo } from "/stores/utils/user.ts";
import dayjs from 'dayjs';
import { PluginLunar } from "dayjs-plugin-lunar";
dayjs.extend(PluginLunar);

const userStore = useUserStore()

const { userInfo } = userStore

const form = ref(null)
const pickerRef = ref(null)
const showCityPickerView = ref(false)

const formInfo = ref(parseUserInfo(userInfo))

const birthdayStr = computed(() => {
    return `${dayjs(formInfo.value.birthday).format('YYYY-MM-DD HH:mm:ss')}`
})
const lunarBirthdayStr = computed(() => {
    return dayjs(formInfo.value.birthday).format('LY年LMLD')
})

const handleSubmit = async () => {
    form.value?.submit()
    const { isPass } = form.value?.validate()
    if (!isPass) return;
    await userStore.updateUserInfo(formInfo.value)
    formInfo.value = parseUserInfo(userStore.userInfo)
}

const handleSelectDate = () => {
    pickerRef.value?.show()
}

const handleBirthdayDate = (val) => {
    formInfo.value.birthday = val.date
}

defineExpose({
    handleSubmit,
})
</script>
<style lang="less" scoped></style>